/** ==================================================
  *
  * CONSTANTS.
  *   OSCE: 
  *         #FFFFFF (background), #666666 (border), #DCDCDC (cell-border-lint , resizable-drag-line),
  *         #0066cc(hearder hover) , #3399FF(ui-selected) , #F5F1FF(ui-hover)
  * 
  * ================================================== */
.trend-grid {
    background: #FFFFFF;
    cursor: default;
    height:100%;    
    z-index:1;    
    overflow:hidden;
    width:100%;
    position: relative;  
}
.trend-grid .resizable-handle {
    cursor: col-resize;
}
.trend-grid .column-right{
    background: url(images/column-middle.png) top right;
    display: block;
    height: 25px;    
    position: absolute;
    right: 0px;
    top: 0;    
    width: 4px;
}
.trend-grid .column-left{
    position: absolute;
    display: block;
    width: 4px;
    left: 0px;
    top: 0;    
    background: url(images/column-middle.png) top left ;
    height: 25px;
}
.trend-grid .headerScrollerWrap{
    border-left: 0px;
    overflow: hidden;
    position:relative;
    width: 100%;
	border-bottom: 1px solid #DCDCDC;
}
.trend-grid .header{
    background: url(images/column-middle.png) repeat-x;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    width: 999999px;
}
.trend-grid .header .column{
    background: url(images/column-middle.png) repeat-x;
    border-right: 1px solid #DCDCDC;
    border-left: 0px;
    border-top: 0px;
    border-bottom: 0px;
    display: inline-block;
    
    float: left;
    line-height: 19px;
    margin: 0;
    overflow: hidden;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 3px;
    padding-bottom: 3px;
    position: relative;
    text-overflow: ellipsis;
}
.trend-grid .header .column-hover{
    color:#0066CC;
    text-decoration:underline;
}
.trend-grid .header .ui-sortable-helper{
    border-left: 1px solid #DCDCDC;
    text-decoration:none;
    color:#000000;
    background: url(images/column-middle-ui-sortable-helper.png) repeat-x;
}
.trend-grid .header .ui-sortable-helper .column-left{
    background: url(images/column-middle-ui-sortable-helper.png) repeat-x;
}
.trend-grid .header .ui-sortable-helper .column-right{
    background: url(images/column-middle-ui-sortable-helper.png) repeat-x;
}
.trend-grid .header .indicator{
    display: inline-block;
    height:7px;
    width:14px;
}
.trend-grid .header .asc{
    background: url(images/indicator-asc.gif) no-repeat top right;
}
.trend-grid .header .desc{
    background: url(images/indicator-desc.gif) no-repeat  top right;
}
.trend-grid .contentScrollerWrap{
    position:relative;
    overflow-x:auto;
    overflow-y:auto;
    width:100%;
}
.trend-grid .content{
    padding:0px;
    margin:0px;
    position: relative;
    z-index: 99;
    overflow:visible;    
}
.trend-grid .content .row{
    border: 0px;
    height:24px;
    position: absolute;
    width:100%;
}
.trend-grid .content .row[row='0'] .cell{
	border-top:none;
}
.trend-grid .content .trend-ui-hover{
    background-color:#E5F1FF;
}
.trend-grid .content .trend-ui-selected{
    border-top: 1px solid #6699CC;
    background-color:#BEDFFF;
}
.trend-grid .content .trend-ui-selected[row='0'] .cell{
    margin-top:-2px;
    border-top:1px solid #6699CC;
}
.trend-grid .content .trend-ui-selected[row='0'] .cell-custom{
    margin-top:-1px;
    margin-bottom:1px;
}
.trend-grid .content .trend-ui-selected .cell{
    margin-top:-1px;
    border-top:1px solid #6699CC;
}
.trend-grid .content .trend-ui-selected-sibling{
    border-top: 1px solid #6699CC;
}
.trend-grid .content .trend-ui-selected-sibling .cell{
    margin-top:-1px;
    border-top:1px solid #6699CC;
}
.trend-grid .content .trend-ui-selecting{
    background-color:#BEDFFF;
}
.trend-grid .content .cell{
    border-right: 1px solid #DCDCDC;
    border-top: 1px solid #DCDCDC;
    cursor: default;
    height:24px;
    line-height:24px;
    margin: 0;
    overflow: hidden;
    position: absolute;
    padding: 0px 2px 0px 4px;
    /*text-overflow: ellipsis;*/
    vertical-align: top;
    white-space: nowrap;
    z-index: 1;
}
.trend-grid .content .cell .ui-draggable{
    display:inline-block;
}
.trend-grid .content .cell .ui-selectable{
    display:inline-block;
    width:10000px;
    height:100%;
}
.trend-grid .content .cell img{
    float:left;
    margin-right:4px;
}
.trend-grid .drag-line{
    background-color:#666666;
    height:100%;
    left:100px;
    position: absolute;
    top:0px;
    width:1px;
    z-index: 100;
}
.trend-grid .ajax-loading{
    background-image: url(images/75p_white.png) ;
    height:100%;
    position:absolute;
    top:0px;
    width:100%;
    z-index:999;
    line-height:100%;
}
.trend-grid .ajax-loading .message{
    height:32px;
    width:32px;
    position:absolute;
    background-image: url(images/loading_32.gif) ;
    background-repeat:no-repeat;
}
.ui-selectable-helper { position: absolute; z-index: 100; border:1px dotted black; }
